<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<topLogo></topLogo>
			<view class="wrap" v-if="userSfID == 1">
				<view class="center-second">
					<!-- <view class="left">
						<view class="company">
							{{userCenterData.user.companyName}}
						</view>
					</view> -->
					<view class="left">
						<view class="head-img-div">
							<image :src="$public.imgageUrl(headimg)" mode="scaleToFill" class="head-img"></image>
						</view>
						<view class="text">
							<view class="name">
								{{ userCenterData.user.companyName }}
							</view>
						</view>
					</view>
					<view class="right" @click="$refs.xuanzeSF.open()">切换身份</view>
				</view>
				<view class="center-three" style="margin-top: 90rpx">
					<view class="grid-item-box">
						<view class="num">{{ hxNum }}</view>
						<view class="text">已核销领取垃圾袋</view>
						<view class="chakantext" @click="$public.navto('wyHxList')">核销明细 ></view>
					</view>
					<view class="shuxian"></view>
					<view class="grid-item-box">
						<view class="num">0</view>
						<view class="text">未正确垃圾分类</view>
						<view class="chakantext">查看详情 ></view>
					</view>
				</view>
				<view class="saoma-list">
					核销垃圾袋
					<uni-icons type="scan" size="26" color="#DF686A" @click="laJiDaiSaoMa"></uni-icons>
				</view>
				<view class="saoma-list">
					申报未正确垃圾分类
					<uni-icons type="scan" size="26" color="#DF686A" @click="laJiFenLeiSaoMa"></uni-icons>
				</view>
				<view class="my-order">
					<!-- <jxwTitle title="我的订单" :showMore="true" moreText="详情"></jxwTitle> -->
					<jxwTitle title="团队管理"></jxwTitle>
					<view class="my-flex">
						<view class="grid-item-box">
							<view class="text">累计佣金</view>
							<view class="num">{{ userCenterData.user.allYjScore }}</view>
							<view class="yjbtn">
								<view class="btn" @click="$public.navto('yongJinMingXi')">佣金明细</view>
							</view>
						</view>
						<view class="grid-item-box">
							<view class="text">已用佣金</view>
							<view class="num">{{ userCenterData.user.useYjScore }}</view>
							<view class="yjbtn"></view>
						</view>
						<view class="grid-item-box">
							<view class="text">可提现佣金</view>
							<view class="num">{{ userCenterData.user.allYjScore + userCenterData.user.useYjScore }}</view>
							<view class="yjbtn">
								<view class="btn" @click="$public.navto('yongJinTiXian')">提现</view>
							</view>
						</view>
					</view>
					<!-- <view class="two-btn">
						<view class="btn-css left-btn">
							推广订单
						</view>
						<view class="btn-css right-btn" @click="$public.navto('tuiGuangYongHu')">
							推广用户
						</view>
					</view> -->
				</view>
			</view>
			<view class="wrap" v-else-if="userSfID == 2">
				<view class="center-second" style="margin-bottom: 0">
					<!-- <view class="left">
						<view class="company">
							{{userCenterData.user.companyName}}
						</view>
					</view> -->
					<view class="left">
						<view class="head-img-div">
							<image :src="$public.imgageUrl(headimg)" mode="scaleToFill" class="head-img"></image>
						</view>
						<view class="text">
							<view class="name">
								{{ userCenterData.user.companyName }}
							</view>
						</view>
					</view>
					<view class="rightzl" @click="$public.navto('qiYeZiLiao')">企业资料 >></view>
					<!-- <view class="right noback">
						企业资料 >>
					</view> -->
				</view>
				<view class="center-second" style="margin-top: 0">
					<view class="left">
						<view class="company"></view>
					</view>
					<view class="right" @click="$refs.xuanzeSF.open()">切换身份</view>
					<!-- <view class="right noback">
						企业资料 >>
					</view> -->
				</view>
				<view class="center-second">
					<view class="left">
						<view class="company zje">
							总金额：￥
							<text class="big-num">{{ userCenterData.user.allYjScore + userCenterData.user.useYjScore }}</text>
						</view>
					</view>
					<view class="right saoma" @click="shangJiaHeXiao">
						<uni-icons type="scan" size="16" color="#fff"></uni-icons>
						扫码核销
					</view>
				</view>
				<view class="" style="margin-top: 90rpx">
					<uni-list class="center-list">
						<uni-list-item title="结算说明" showArrow thumb="/static/sj_sj_img1.png" thumb-size="sm" to="/pages/news/detail?articleId=55" />
						<uni-list-item title="去提现" showArrow thumb="/static/sj_sj_img1.png" thumb-size="sm" to="yongJinTiXian?typeId=2" />
						<uni-list-item title="提现明细" showArrow thumb="/static/sj_sj_img1.png" thumb-size="sm" to="yongJinMingXi" />
					</uni-list>
				</view>
			</view>
			<view class="wrap" v-else>
				<view class="center-second">
					<view class="left">
						<view class="head-img-div">
							<image :src="$public.imgageUrl(headimg)" mode="scaleToFill" class="head-img"></image>
							<button type="primary" size="mini" v-if="nickName" open-type="chooseAvatar" @chooseavatar="uploadHeadImg" class="txbtn">更换</button>
						</view>
						<view class="juzhong" v-if="!nickName">
							<button size="mini" type="primary" @click="openbuild">获取</button>
						</view>
						<view class="text" v-else>
							<view class="name">
								{{ nickName }}
							</view>
						</view>
						<view class="lv-img" v-if="userCenterData.user.params.pfJf">
							<image :src="`/static/sj_lv_${$public.jfLevel(userCenterData.user.params.pfJf)}.png`" mode="scaleToFill" class="user-lv-img"></image>
						</view>
					</view>
					<view class="right" @click="$refs.xuanzeSF.open()" v-if="jmsStatus > 0">切换身份</view>
				</view>
				<view class="center-three" style="margin-top: 90rpx">
					<view class="grid-item-box">
						<view class="num">0</view>
						<view class="text">投放记录</view>
					</view>
					<view class="grid-item-box">
						<view class="grid-item-box" @click="$public.navto('/pages/index/beans')">
							<view class="num">{{ 0 }}</view>
							<view class="text">温邻豆</view>
						</view>
					</view>
					<view class="shuxian"></view>
					<view class="grid-item-box" @click="$public.navto('/pages/index/jifen')">
						<view class="num">{{ userCenterData.user.allScore }}</view>
						<view class="text">我的积分</view>
					</view>
					<view class="shuxian"></view>
					<!-- <view class="grid-item-box">
						<view class="num">0</view>
						<view class="text">优惠卷</view>
					</view> -->
					<view class="grid-item-box" @click="$public.navto('coupon')">
						<view class="num">{{ userCenterData.user.params.couponNum }}</view>
						<view class="text">优惠卷</view>
					</view>
				</view>
				<view class="my-order">
					<!-- <jxwTitle title="我的订单" :showMore="true" moreText="详情"></jxwTitle> -->
					<jxwTitle title="我的订单"></jxwTitle>
					<view class="my-flex">
						<view class="grid-item-box" @click="$public.navto('/pages/order/order', { typeId: 4 })">
							<view class="num">{{ orderData.num1 }}</view>
							<view class="text">机器订单</view>
						</view>
						<view class="grid-item-box" @click="$public.navto('/pages/order/order', { typeId: 1 })">
							<view class="num">{{ orderData.num2 }}</view>
							<view class="text">积分订单</view>
						</view>
						<view class="grid-item-box" @click="$public.navto('/pages/order/order', { typeId: 2 })">
							<view class="num">{{ orderData.num3 }}</view>
							<view class="text">团购订单</view>
						</view>
						<view class="grid-item-box" @click="$public.navto('/pages/order/order', { typeId: 3 })">
							<view class="num">{{ orderData.num4 }}</view>
							<view class="text">商家订单</view>
						</view>
						<view class="grid-item-box" @click="$public.navto('/pages/order/order', { typeId: 5 })">
							<view class="num">{{ orderData.num5 }}</view>
							<view class="text">优选订单</view>
						</view>
					</view>
				</view>
				<view class="my-order">
					<jxwTitle title="常用功能"></jxwTitle>
					<view class="my-flex">
						<view class="grid-item-box" @click="$public.navto('/pages/address/address')">
							<view class="num">
								<image src="../../static/sj_center_img_1.png" mode="scaleToFill" class="cy-img"></image>
							</view>
							<view class="text">地址管理</view>
						</view>
						<view class="grid-item-box" @click="$public.navto('ShangJiaRuZhu')">
							<view class="num">
								<image src="../../static/sj_center_img_2.png" mode="scaleToFill" class="cy-img"></image>
							</view>
							<view class="text">商家入驻</view>
						</view>
						<view class="grid-item-box" @click="$public.navto('wuyesign')">
							<view class="num">
								<image src="../../static/sj_center_img_3.png" mode="scaleToFill" class="cy-img"></image>
							</view>
							<view class="text">物业申请</view>
						</view>
						<view class="grid-item-box">
							<button class="bj-btn-wx" open-type="contact" :plain="true">
								<view class="num">
									<image src="../../static/sj_center_img_4.png" mode="scaleToFill" class="cy-img"></image>
								</view>
								<view class="text">在线客服</view>
							</button>
						</view>
						<view class="grid-item-box" @click="$public.navto('message')">
							<view class="num">
								<image src="../../static/sj_center_img_5.png" mode="scaleToFill" class="cy-img"></image>
							</view>
							<view class="text">投诉意见</view>
						</view>
					</view>
				</view>
			</view>

			<uni-popup ref="popup">
				<view class="sm-div">
					<view class="sm-div-bg">
						<view class="sm-title">
							<uni-list-chat :avatar-circle="true" :avatar="tData.headimg"></uni-list-chat>
							<button type="primary" size="mini" open-type="chooseAvatar" @chooseavatar="getavatar">获取头像</button>
						</view>
						<view class="sm-neirong">
							<input type="nickname" v-model="tData.nickName" @blur="nickNameInput" placeholder="请输入昵称" />
						</view>
						<view class="sm-neirong flex">
							<view class="shouji">
								<uni-easyinput v-model="tData.phone" placeholder="手机号" disabled :inputBorder="false" :styles="{ disableColor: '#fff' }" />
							</view>

							<button type="primary" size="mini" open-type="getPhoneNumber" @getphonenumber="getphone">获取手机号</button>
						</view>
						<view class="sm-btn">
							<view class="btncss" @click="queding">确定</view>
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="xuanzeSF">
				<view class="sm-div">
					<view class="sm-div-bg xzsf-div">
						<view class="sm-title">选择身份</view>
						<view v-if="jmsStatus == 1">
							<view class="sm-list" :class="item.active ? 'active' : ''" v-for="(item, index) in userSfData" :key="item.id" @click="sfxuanze(index, 1)">
								<image :src="item.active ? '/static/sj_duihov.png' : '/static/sj_dui.png'" mode="scaleToFill" class="image"></image>
								<text>{{ item.title }}</text>
							</view>
						</view>
						<view v-else>
							<view class="sm-list" :class="item.active ? 'active' : ''" v-for="(item, index) in userSfDataSJ" :key="item.id" @click="sfxuanze(index, 2)">
								<image :src="item.active ? '/static/sj_duihov.png' : '/static/sj_dui.png'" mode="scaleToFill" class="image"></image>
								<text>{{ item.title }}</text>
							</view>
						</view>
						<view class="btn-div">
							<view class="btncss" @click="changeUserSf">确定</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			headimg: '',
			nickName: '未获取',
			tData: {
				headimg: '',
				nickName: '',
				phone: ''
			},
			hasLogin: false,
			phone: '',
			note: '',
			jmsStatus: 0,
			userTypeText: '',
			wedata: {
				openid: '',
				sessionKey: '',
				unionid: ''
			},
			addWeMp: false,
			orderData: {
				num1: 0,
				num2: 0,
				num3: 0,
				num4: 0,
				num5: 0,
				num6: 0
			},
			list: [
				{
					url: '/static/c1.png',
					text: 'Grid 1',
					badge: '0',
					type: 'primary'
				},
				{
					url: '/static/c2.png',
					text: 'Grid 2',
					badge: '1',
					type: 'success'
				},
				{
					url: '/static/c3.png',
					text: 'Grid 3',
					badge: '99',
					type: 'warning'
				}
			],
			jfData: {
				keyong: 0,
				zong: 0,
				ketixian: 0
			},
			yyText: '我的预约',
			userCenterData: {
				user: {
					allScore: 0,
					useScore: 0,
					params: {
						pfJf: null
					}
				},
				service: {
					childName: ''
				},
				yyNum: ''
			},
			articleId: 12,
			articleData: {},
			HTData: [],
			userSfData: [
				{
					id: 0,
					title: '普通会员',
					active: true
				},
				{
					id: 1,
					title: '物业',
					active: false
				}
			],
			userSfDataSJ: [
				{
					id: 0,
					title: '普通会员',
					active: true
				},
				{
					id: 2,
					title: '商家',
					active: false
				}
			],
			userSfID: 0,
			hxNum: 0
		};
	},
	onLoad(options) {
		// console.log(this.$store.state.hasJms)
		// if (!this.$public.isLogin())
		// 	this.gettoken()
	},
	onShow() {
		this.headimg = this.$store.state.userInfo.headimg;
		this.nickName = this.$store.state.userInfo.nickName;
		this.hasLogin = this.$store.state.hasLogin;
		this.phone = this.$store.state.userInfo.phone;
		this.jmsStatus = this.$store.state.userInfo.jmsStatus;
		// this.jmsStatusArr = this.jmsStatus.split(",")
		// this.$refs.xuanzeSF.open()
		// this.jmsStatus = 0
		// console.log("this.jmsStatus", this.jmsStatus)
		// if (this.jmsStatus > 0) {
		// 	this.userTypeText = this.$store.state.userInfo.userTypeText
		// } else {
		// 	this.getUserInfo()
		// }
		this.getUserInfo();
		this.getAllOrderCount();
		let show = uni.getStorageSync('showUser');
		if (show && this.$store.state.hasLogin) {
			this.$refs.popup.open('center');
			uni.removeStorageSync('showUser');
		}
		// console.log("this.nickName", this.nickName)
		// if (this.$store.state.hasLogin) {
		// 	this.getOrderCount()
		// }
	},
	methods: {
		// getOrderCount
		...mapMutations(['login']),
		getavatar(e) {
			console.log('getavatar', e);
			this.tData.headimg = e.detail.avatarUrl;
		},
		async uploadHeadImg(e) {
			const [err, { data }] = await uni.uploadFile({
				url: this.baseUrl + '/api/upload',
				filePath: e.detail.avatarUrl,
				name: 'file'
			});
			let res = JSON.parse(data);
			let info = {
				headImg: res.fileName
			};
			this.$public.htmlPost('/api/changeImg', info).then((res) => {
				let data = res.data;
				if (data.code == 0) {
					this.headimg = info.headImg;
				}
			});
		},
		getphone(e) {
			let that = this;
			console.log('getphone', e.detail.errMsg);
			if (e.detail.errMsg == 'getPhoneNumber:fail no permission') {
				uni.request({
					url: that.baseUrl + '/wechat/ma/phoneNumber',
					data: {
						code: e.detail.code
					},
					success(res) {
						// console.log("phoneNumber", res)
						let data = res.data;
						if (data.code == 0) {
							// that.tData.phone = data.data.phone_info.phoneNumber;
							that.tData.phone = 18585327798;
						}
						console.log('phone', that.tData.phone);
					}
				});
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '请授权获取手机号'
				});
			}
		},
		queding() {
			// if (!this.tData.headimg || !this.tData.nickName.trim() || !this.tData.phone) {
			if (!this.tData.headimg || !this.tData.nickName.trim()) {
				uni.showModal({
					title: '温馨提示',
					content: '请填写所有用户信息'
				});
				return false;
			}
			this.toLogin();
		},
		nickNameInput(e) {
			console.log('nickNameInput', e);
			this.tData.nickName = e.detail.value;
		},
		async getUserInfo() {
			this.$public.htmlPost('/api/getUserInfo').then((res) => {
				let data = res.data;
				console.log('getUserInfo', data);
				if (data.code == 0) {
					this.userCenterData.user = data.data;
				}
			});
		},
		async getAllOrderCount() {
			let that = this;

			this.$public.htmlPost('/api/getAllOrderCount').then((res) => {
				console.log('getAllOrderCount res', res);
				let data = res.data.data;
				that.orderData = {
					num1: 0,
					num2: 0,
					num3: 0,
					num4: 0,
					num5: 0,
					num6: 0
				};

				res.data.data.forEach((item) => {
					if (item.typeId == 1) that.orderData.num2++;
					else if (item.typeId == 2) that.orderData.num3++;
					else if (item.typeId == 3) {
						if (item.status == 1) that.orderData.num4++;
					} else if (item.typeId == 5) that.orderData.num5++;
					// else if (item.typeId == 6)
					// 	that.orderData.num5++
					// else
					// 	that.orderData.num1++
				});
			});
			this.$public
				.htmlPostMachinePay('/open/api/order/getOrderList', {
					OpenId: this.$store.state.userInfo.openId
				})
				.then((res) => {
					console.log('res', res);
					let data = res.data.data;
					that.orderData.num1 = data.length;
				});
		},
		openbuild() {
			// if (this.$store.state.hasLogin)
			this.$refs.popup.open('center');
			// else {
			// 	this.$api.msg("无效")
			// }
		},
		async toLogin() {
			// console.log("toLogin")
			let that = this;
			this.logining = true;

			// console.log("profile", profile)
			const [err, { data }] = await uni.uploadFile({
				url: that.baseUrl + '/api/upload',
				filePath: this.tData.headimg,
				name: 'file'
			});
			let res = JSON.parse(data);
			let info = {
				nickName: this.tData.nickName.trim(),
				avatarUrl: res.fileName,
				phone: this.tData.phone
			};

			let parentId = 0;
			if (uni.getStorageSync('parentId') && uni.getStorageSync('parentId') != 'undefined') {
				parentId = uni.getStorageSync('parentId');
			}
			let openId = that.$store.state.userInfo.openId;
			if (parentId != 0) {
				parentId = Number(parentId.replace('userId=', ''));
			}
			uni.request({
				url: that.baseUrl + '/api/fastBuilding',
				data: {
					weCatId: openId,
					nickName: info.nickName,
					headImg: info.avatarUrl,
					phone: info.phone,
					parentId: parentId
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				method: 'POST',
				success(r) {
					console.log('fastBuilding', r);
					that.$api.msg(r.data.msg);
					if (r.data.code == 0) {
						uni.removeStorageSync('parentId');
						that.login({
							token: r.data.data.token,
							nickName: info.nickName,
							headimg: info.avatarUrl,
							openId: openId,
							typeId: r.data.data.user.typeId,
							id: r.data.data.user.memberId,
							jmsStatus: r.data.data.user.sex,
							phone: info.phone
						});
						that.nickName = info.nickName;
						that.headimg = info.avatarUrl;
						that.phone = info.phone;
						// that.$public.reload()
					} else {
						that.logining = false;
					}
					that.$refs.popup.close();
				}
			});
			return false;
		},
		telPhone(phone) {
			this.$public.telPhone(phone);
		},
		openNoData() {
			this.$api.msg('功能正在开发中，尽情期待！');
		},
		sfxuanze(index, typeId) {
			if (typeId == 2) {
				this.userSfDataSJ.forEach((item) => {
					item.active = false;
				});
				this.userSfDataSJ[index].active = true;
			} else {
				this.userSfData.forEach((item) => {
					item.active = false;
				});
				this.userSfData[index].active = true;
			}
		},
		changeUserSf() {
			let that = this;
			if (this.jmsStatus == 1) {
				this.userSfData.forEach((item) => {
					if (item.active) {
						that.userSfID = item.id;
					}
				});
			} else {
				this.userSfDataSJ.forEach((item) => {
					if (item.active) {
						that.userSfID = item.id;
					}
				});
			}
			that.getItemRecordsList();
			this.$refs.xuanzeSF.close();
		},
		laJiDaiSaoMa() {
			let that = this;
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					let code = res.result.replace('collectionCode=', '');
					uni.showModal({
						title: '核销此券码',
						content: code,
						success: function (res) {
							if (res.confirm) {
								that.updateItemRecords(code);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			});
		},
		laJiFenLeiSaoMa() {
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		updateItemRecords(code) {
			this.$public
				.htmlPost('/api/updateItemRecords', {
					code: code
				})
				.then((res) => {
					let data = res.data;
					if (data.code == 0) {
						uni.showModal({
							title: '温馨提示',
							content: '核销成功'
						});
					} else {
						uni.showModal({
							title: '温馨提示',
							content: '二维码错误或已核销过该劵'
						});
					}
				});
		},
		shangJiaHeXiao() {
			let that = this;
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					let code = res.result.replace('orderCode=', '');
					uni.showModal({
						title: '核销此券码',
						content: code,
						success: function (res) {
							if (res.confirm) {
								that.hxShangJiaEwm(code);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			});
		},
		hxShangJiaEwm(code) {
			this.$public
				.htmlPost('/api/hxShangJiaEwm', {
					code: code
				})
				.then((res) => {
					let data = res.data;
					if (data.code == 0) {
						uni.showModal({
							title: '温馨提示',
							content: '核销成功'
						});
					} else {
						uni.showModal({
							title: '温馨提示',
							content: data.msg
						});
					}
				});
		},
		getItemRecordsList() {
			let that = this;
			this.$public.htmlPost('/api/getItemRecordsList').then((res) => {
				let data = res.data;
				if (data.code == 0) {
					that.hxNum = data.data.length;
				}
			});
		}
	}
};
</script>
<style lang="scss">
.content {
	background: url(#{$imageUrl}/centerbg.png) center 0 no-repeat;
	background-size: 100% auto;
	color: #232323;

	.wrap {
		padding: $uni-wrap-padding;
	}

	.sq-div {
		/deep/.uni-list {
			background: #fff;
			padding: 40rpx;
			border-radius: 20rpx;
		}
	}

	.sm-div {
		padding: $uni-wrap-padding;

		.sm-div-bg {
			background: linear-gradient(180deg, #fff2f2 0%, #ffffff 100%);
			padding: 40rpx;
			border-radius: 20rpx;
			min-width: 500rpx;

			&.xzsf-div {
				.sm-title {
					color: #333333;
					font-size: 34rpx;
					justify-content: center;
					margin-bottom: 30rpx;
				}

				.sm-list {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #0f6dc9;
					width: 240rpx;
					margin: 0 auto 30rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #e6e6e6;

					&.active {
						border: 2rpx solid #df686a;
					}

					.image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 15rpx;
					}
				}
			}

			.sm-title {
				font-size: 36rpx;
				text-align: center;
				// padding-bottom: 20rpx;
				color: #0f6dc9;

				/deep/.uni-list--border {
					display: none;
				}

				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.sm-neirong {
				padding: 10rpx 20rpx;
				border: 1px solid #d5d5d5;
				border-radius: 10rpx;
				/* margin-bottom: 20rpx; */
				margin: 20rpx 0 40rpx;

				&.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.shouji {
						width: 200rpx;
					}
				}

				input {
					font-size: 24rpx;
				}

				/deep/.uni-input-input {
					font-size: 24rpx;
				}

				.input-placeholder {
					font-size: 24rpx;
				}
			}

			.sm-btn {
				.btncss {
					height: 60rpx;
				}
			}

			.sm-list {
				margin-bottom: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				height: 80rpx;

				.image {
					width: 25rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}
			}

			.btn-div {
				display: flex;
				justify-content: center;

				.btncss {
					width: 330rpx;
					height: 80rpx;
				}
			}
		}
	}

	.center-top {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 40rpx 0;

		.center-top-l {
			display: flex;
			align-items: center;

			.image {
				width: 25rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
		}

		.center-top-r {
			.image {
				width: 26rpx;
				height: 26rpx;
				margin-left: 20rpx;
			}
		}
	}

	.center-second {
		/* margin-bottom: 50rpx; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;

		/* position: relative; */
		.left {
			display: flex;
			align-items: center;

			.company {
				color: #fff;
				font-size: 30rpx;

				&.zje {
					color: rgba(255, 255, 255, 0.8);
					font-size: 26rpx;

					.big-num {
						font-size: 48rpx;
						color: #fff;
					}
				}
			}

			.head-img-div {
				/* width: 94rpx;
					height: 100rpx; */
				margin-right: 20rpx;
				position: relative;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: 8rpx solid rgba(255, 255, 255, 0.5);
					border-radius: 50%;
				}

				.txbtn {
					position: absolute;
					left: 0rpx;
					top: 110rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					line-height: 2;
				}
			}

			.text {
				.name {
					font-size: 34rpx;
					font-weight: 500;
					color: #fff;
				}
			}

			.lv-img {
				margin-top: 8rpx;
				margin-left: 10rpx;

				.user-lv-img {
					width: 75rpx;
					height: 60rpx;
				}
			}
		}

		.right {
			width: 144rpx;
			height: 56rpx;
			background: #df686a;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;

			&.noback {
				width: 200rpx;
				background: none;
			}

			&.saoma {
				width: 200rpx;
			}
		}

		.rightzl {
			color: #fff;
			font-size: 28rpx;
		}
	}

	.center-three {
		border-radius: 16rpx;
		overflow: hidden;
		background: #fff;
		/* border: 1rpx solid #d5d5d5; */
		margin-bottom: 30rpx;
		margin-top: 35rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* .uni-grid-item {
				&:last-child {
					.grid-item-box {
						border-right: 0;
					}
				}
			} */
	}

	.saoma-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		height: 96rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.shuxian {
		width: 1rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.1);
	}

	.grid-item-box {
		flex: 1;
		align-items: center;
		padding: 10rpx 0;
		/* background: #f8f8f8; */
		/* border-right: 1px solid #d5d5d5; */
		padding: 40rpx 0;

		/* &:last-child {
				border-right: 0;
			} */

		&.huise {
			color: #d5d5d5;
			filter: grayscale(100%);
		}

		.num {
			font-size: 48rpx;
			color: #df686a;
			font-weight: 500;
			text-align: center;
		}

		.text {
			text-align: center;
			font-size: 28rpx;
			margin-top: 15rpx;
		}

		.chakantext {
			text-align: center;
			font-size: 26rpx;
			margin-top: 15rpx;
			color: #df686a;
		}

		.yjbtn {
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				background: #df686a;
				width: 120rpx;
				height: 48rpx;
				color: #fff;
				text-align: center;
				font-size: 24rpx;
				line-height: 48rpx;
				border-radius: 8rpx;
			}
		}
	}

	.my-order {
		border-radius: 16rpx;
		background: #fff;
		padding: 40rpx 30rpx;
		margin-top: 35rpx;

		.my-flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.grid-item-box {
				padding: 0;
			}
		}
	}

	.two-btn {
		display: flex;
		justify-content: space-between;
		margin-top: 48rpx;

		.btn-css {
			width: 300rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #df686a;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #df686a;

			&.right-btn {
				background: #df686a;
				color: #fff;
			}
		}
	}

	.cy-img {
		width: 64rpx;
		height: 64rpx;
	}

	.bj-btn-wx {
		text-align: center;
		background: none;
		font-size: 22rpx;
		/* color: #fff; */
		/* margin: 20rpx 0; */
		padding: 0;
		/* height: 68rpx; */
		border: 0;
		line-height: 1.4;

		&::after {
			border: 0;
		}
	}

	/deep/.uni-list {
		background: none;

		&.center-list {
			padding-bottom: 40rpx;
		}

		.uni-list-item {
			background: none;
			margin-bottom: 30rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.tel-text {
			color: #333333;
			font-size: 24rpx;
			display: flex;
			align-items: center;

			.telimage {
				margin-left: 25rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}

		.yyText {
			.uni-list-item__extra-text {
				color: red;
				font-size: 28rpx;
			}
		}
	}
}
</style>
